<template>
  <div>
    <div class="app-container">
      <div class="flex items-center justify-between mb-20px">
        <div>
          <div class="flex items-center gap-12px">
            <h1 class="text-22px font-600 text-#1f2329">异常管理</h1>
            <p>系统异常日志管理</p>
          </div>
          <p class="text-13px text-#646A73 mt-6px">查看和管理系统的异常错误日志和堆栈信息，信息仅供参考，这边啥乱七八糟的信息都会保存</p>
        </div>
        <div class="flex items-center gap-12px">
          <el-button icon="QuestionFilled" @click="helpVisible = true">帮助</el-button>
          <el-button icon="DeleteFilled" type="danger" @click="clear()">清空全部</el-button>
          <el-popover placement="bottom-start" width="200" trigger="click">
            <el-checkbox-group v-model="checkedColumn">
              <el-checkbox v-for="(column, key) in columns" :key="key" :value="column">{{ column }}</el-checkbox>
            </el-checkbox-group>
            <template #reference>
              <el-button icon="Grid" />
            </template>
          </el-popover>
        </div>
      </div>

      <div class="search-container flex items-center justify-between bg-white p-18px rounded-8px mb">
        <div class="search">
          <el-form ref="form" :model="searchData" label-width="80px" class="pt-20px" :inline="true" label-position="left">
            <el-form-item label="搜索">
              <el-input v-model="searchData['message like']" placeholder="请输入错误名称" />
            </el-form-item>
            <el-form-item label="">
              <el-input v-model="searchData['addon']" placeholder="应用标识" style="width: 200px" />
            </el-form-item>
            <el-form-item label="">
              <el-input v-model="searchData['plaid']" placeholder="平台ID" style="width: 200px" />
            </el-form-item>
            <el-form-item style="text-align: right; margin-right: 20px">
              <el-button type="primary" @click="getList(0)">筛选</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-table v-loading="loading" :data="dkTableData" style="width: 100%" class="table">
        <el-table-column v-if="checkedColumn.indexOf('id') >= 0" prop="id" label="id" width="80" />
        <el-table-column v-if="checkedColumn.indexOf('名称') >= 0" prop="message" label="错误信息">
          <template #default="scope">
            <div class="err-msg">
              <div>
                <p>访问地址：</p>
                <span>{{ scope.row.url }}</span>
              </div>
              <div>
                <p>错误信息：</p>
                <span>{{ scope.row.message }}</span>
              </div>
              <div>
                <p>错误文件：</p>
                <span>{{ scope.row.file }}</span>
              </div>
              <div>
                <p>错误行数：</p>
                <span>{{ scope.row.line }}行</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column v-if="checkedColumn.indexOf('访问地址') >= 0" prop="url" label="访问地址" width="200">
          <template #default="scope">
            <div class="url-cell">
              <el-tooltip v-if="scope.row.url" :content="scope.row.url" placement="top">
                <span class="url-text">{{ scope.row.url }}</span>
              </el-tooltip>
              <span v-else class="text-gray-400">无</span>
            </div>
          </template>
        </el-table-column> -->
        <!--        <el-table-column prop="file" label="错误文件" />-->
        <!--        <el-table-column prop="line" label="行" />-->
        <el-table-column prop="trace" label="堆栈" width="500">
          <template #default="scope">
            <JsonViewer :value="scope.row.trace" :copyable="true" />
          </template>
        </el-table-column>
        <el-table-column v-if="checkedColumn.indexOf('平台ID') >= 0" prop="plaid" label="平台ID" />
        <el-table-column v-if="checkedColumn.indexOf('应用标识') >= 0" prop="addon" label="应用标识" />
        <el-table-column v-if="checkedColumn.indexOf('备注') >= 0" prop="remark" label="备注" />
        <el-table-column v-if="checkedColumn.indexOf('请求') >= 0" prop="request" label="请求" />
        <el-table-column v-if="checkedColumn.indexOf('客户端') >= 0" prop="client" label="客户端" />
        <el-table-column v-if="checkedColumn.indexOf('IP') >= 0" prop="ip" label="IP" />
        <el-table-column v-if="checkedColumn.indexOf('创建时间') >= 0" prop="create_time" label="创建时间" />
        <el-table-column width="220" label="操作">
          <template #default="scope">
            <el-button type="primary" @click="handleShow(scope.row)">详情</el-button>
            <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="bg-white rounded-8px p10px mt"
        background
        layout="total,prev, pager, next"
        :total="total"
        :current-page="page"
        :page-size="pageSize"
        @current-change="currentChange"
      />
    </div>
    <!--详情弹窗-->
    <el-dialog v-model="dialogVisible" title="错误详情" width="1400px" top="20px">
      <el-descriptions title="基础信息" border :column="2" :label-style="{ width: '100px' }">
        <el-descriptions-item label="ID">{{ detail.id }}</el-descriptions-item>
        <el-descriptions-item label="错误信息">{{ detail.message }}</el-descriptions-item>
        <el-descriptions-item label="访问地址">
          <el-tooltip v-if="detail.url" :content="detail.url" placement="top">
            <span class="url-text">{{ detail.url }}</span>
          </el-tooltip>
          <span v-else class="text-gray-400">无</span>
        </el-descriptions-item>
        <el-descriptions-item label="平台ID">{{ detail.plaid }}</el-descriptions-item>
        <el-descriptions-item label="应用标识">
          <el-tag v-if="detail.addon"> {{ detail.addon }}</el-tag>
          <el-tag v-else>无</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="备注">{{ detail.remark }}</el-descriptions-item>
        <el-descriptions-item label="客户端">{{ detail.client }}</el-descriptions-item>
        <el-descriptions-item label="IP">{{ detail.ip }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detail.create_time }}</el-descriptions-item>
        <el-descriptions-item label="错误位置">
          <el-tag style="margin-right: 5px">{{ detail.file }}</el-tag>
          <el-tag>{{ detail.line }}行</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="详细信息" border :column="1" :label-style="{ width: '100px' }" style="margin-top: 20px">
        <el-descriptions-item label="堆栈">
          <JsonViewer :value="detail.trace" :copyable="true" :expand-depth="2" />
        </el-descriptions-item>
        <el-descriptions-item label="请求">
          <JsonViewer :value="detail.request" :copyable="true" />
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!--帮助弹窗-->
    <el-dialog v-model="helpVisible" title="帮助" width="1400px" top="5vh">
      <!--      不显示iframe边框-->
      <iframe src="http://doc.dkyx.cc" frameborder="0" width="100%" height="800px" />
    </el-dialog>
  </div>
</template>

<script>
import { getList, clear, del } from '@/api/exception'

export default {
  name: 'List',
  components: {},
  props: {
    value: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      dkTableData: [],
      searchData: {},
      dialogFormVisible: false,
      formWidth: '1000px',
      formData: null,
      loading: true,
      columns: ['id', '名称', '值', '访问地址', '平台ID', '应用标识', '类型', '备注', '客户端', 'IP', '创建时间'],
      checkedColumn: ['id', '名称', '值', '访问地址', '类型'],
      detail: {},
      dialogVisible: false,
      helpVisible: false
    }
  },
  computed: {},
  mounted() {
    this.reset()
  },
  methods: {
    handleShow(item) {
      this.detail = item
      this.dialogVisible = true
    },
    handleDelete(item) {
      this.$confirm('此操作将永久删除该事件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(item.id).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList(0)
        })
      })
    },

    // 清空
    clear() {
      this.$confirm('此操作将永久删除该事件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        clear().then((res) => {
          this.$message({
            type: 'success',
            message: res.msg
          })
          this.getList(0)
        })
      })
    },
    getList(page) {
      this.page = page || 0
      getList(this.page, this.pageSize, this.searchData).then((res) => {
        this.dkTableData = res.data
        this.total = parseInt(res.msg)
        this.loading = false
      })
    },
    currentChange(page) {
      this.getList(page)
    },
    reset() {
      this.searchData = {
        name: '',
        type: ''
      }
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.err-msg {
  p {
    color: #999;
    //禁止复制
    -webkit-user-select: none;
    user-select: none;
  }
  span {
    color: #f00;
  }
}

.url-cell {
  .url-text {
    color: #165dff;
    cursor: pointer;
    word-break: break-all;
    &:hover {
      text-decoration: underline;
    }
  }
}
</style>
